<!--
Created by IntelliJ IDEA.
User: Kailan
Date: 2021/6/9
Time: 21:41
-->
<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0;background-color: RGB(16,12,42)">
<body style="height: 100%; margin: 0;background-color: RGB(16,12,42)">

<div id="container" style="height: 60%;width: 60%;top:150px;left: 300px"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom,'dark');
    var app = {};
    var option;

    option = {
        title: {
            text: '不同天气下每个小时的平均租赁数量',
            right:0

            // fontSize: 60
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // Use axis to trigger tooltip
                type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },
        legend: {
            data: ['casual', 'registered']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: ['晴天 | 多云', '雾天 | 阴天', '小雪 | 小雨', '大雨 | 大雪 | 大雾']
        },
        series: [
            {
                name: 'casual',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [2, 16, 29, 40]
            },
            {
                name: 'registered',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [71, 95, 145, 164]
            }
        ]
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

</script>
</body>
</html>